<template>
	<view class="wrapper" :style="{padding:`calc(220rpx + ${safeTop}px) 0 0`}">
		<div class="posf">
			<div class="header flex-start" :style="{padding:`calc(15rpx + ${safeTop}px) 30rpx 60rpx`}">
				<u-icon name="arrow-left" color="#ffffff" size="26" @click="back(1)"></u-icon>
				<div class="cfff f34 ml20">积分明细</div>
			</div>
			<div class="nav-bar">
				<div class="main space-around f32">
					<div class="posr" :class="navIndex==0?'active':''" @click="setNav(0)" >充值</div>
					<div class="posr" :class="navIndex==1?'active':''" @click="setNav(1)" >消费</div>
				</div>
			</div>
		</div>
		<u-empty v-if="Details.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<!-- 充值 -->
		<div class="bfff recharge" v-else>
			<div class="list-box center mb30" v-for="(v,i) in Details" :key="i">
				<div class="left f32 cfff center mr25 ml10">{{v.content.substring(0,1)}}</div>
				<div class="right flex1 noBorder">
					<div class="space-between mb20 mt10 ml5 mr20">
						<div class="f24 nowrap flex1">{{v.content}}</div>
						<div class="f24 text1 fbold" v-if="v.score.indexOf('-')!= -1">{{v.score}}积分</div>
						<div class="f24 ctheme fbold" v-else>{{v.score}}积分</div>
					</div>
					<div class="space-between ml5 mr20">
						<div class="f22 c999 flex1">{{v.ctime}}</div>
						<!-- <div class="f22">成功</div> -->
					</div>
				</div>
			</div>
		</div>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				userInfo:'',
				pageNum: 1,
				pageSize: 10,
				Details: []
			}
		},
		onLoad(e){
			this.navIndex = e.navIndex
			this.userInfo = uni.getStorageSync('uInfo')
			this.getScoreDetails()
		},
		onReachBottom(){
			this.pageNum++
			this.getScoreDetails()
		},
		methods: {
			// 查询充值记录和提现记录接口
			getScoreDetails(){
				this.$http(this.navIndex==0?'/api//recharge/records':'/api/consumption/records',{
					phone: this.userInfo.phone,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((r)=>{
					this.Details = this.Details.concat(r.data)
				})
			},
			// 切换状态栏
			setNav(e) {
				this.navIndex = e
				this.pageNum = 1
				this.Details = []
				this.getScoreDetails()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		width: 705rpx;
		padding: 35rpx 20rpx 10rpx;
		margin: 0 auto 35rpx;
		border-radius: 13rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F1F2F3;

		.arrow-down {
			margin-top: -45rpx;
		}

		.list-box {
			.left {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: linear-gradient(to top, #F857A5, #FF5858);
				margin-top: -40rpx;
			}

			.right {
				border-bottom: 1rpx solid #D9D9D9;
				padding-bottom: 35rpx;
			}
		}

	}

	.nav-bar {
		width: 100%;
		background: linear-gradient(to bottom, #FEDAEB, #FDFAFB);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 25rpx 35rpx ;
		margin-top: -33rpx;
		box-shadow: 0rpx -4rpx 6rpx 0 #FF5859;

		.keyword {
			padding-left: 20rpx;
			width: 675rpx;
			height: 50rpx;
			box-shadow: 0rpx 0rpx 16rpx 2rpx #FDCBE0;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			margin: 0 auto 30rpx;
		}

		.main {
			padding-bottom: 30rpx;

			.active {
				color: #FF5555;
				font-weight: 800;

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 60rpx);
					bottom: -30rpx;
					background-color: #FD7D7E;
					width: 120rpx;
					height: 8rpx;
					border-radius: 35rpx 35rpx 0 0;
				}
			}
		}
	}

	.posf {
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
	}

	.header {
		background: linear-gradient(to left, #F857A5, #FF5858);
		padding-left: 30rpx;
		padding-bottom: 55rpx;
	}

	.text1 {
		color: #7EB43C;
	}

	.left-logo {
		background: linear-gradient(to bottom, #1C84C1, #12D5F8);
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-top: -95rpx;
	}

	.ticket {
		margin: 25rpx 0 25rpx 5rpx;
	}
</style>